<!-- 通过手机号获取验证码 -->
<template>
	<view>
		<view class="allMargin">
			<form>
				<input v-model="phoneNumber" type="text" placeholder="请输入您的手机号" class="common-input" />
				<view class="protocol flex-row">
						<van-checkbox :value="checked" shape="square" @change="onChange" checked-color="#53A4FC" class="marginCheckbox" ></van-checkbox>
						<label>
							我已阅读并同意
							<text class="protocolText">《用户协议》</text>
						</label>
				</view>
				<button open-type="getUserInfo" class="common-button" :disabled="inMsgInterval ? true : false" @click="getUserInfo">获取验证码{{ countDown }}</button>
			</form>
		</view>
		
	</view>
</template>

<script>
	var graceChecker = require("@/common/graceChecker.js"); //graceUI的表单验证
	import {
		verifyPhone,
		getPhoneCode
	} from '@/common/api/quickRegister/quickRegister.js'
	export default {
		data() {
			return {
				checked: false,
				countDown: '',
				phoneNumber: '',
				inMsgInterval: false,
				fixedMsgInterval: 60,
				msgInterval: 60,
				info: '',
			}
		},
		methods: {
			// 提交手机号判断是否注册
			formSubmit: function() {
				if(!this.checked) {
					uni.showToast({
						title: '同意用户协议后才能注册',
						icon: 'none'
					})
				} else {
					this.verifyPhone()
				}
				
			},
			// 同意授权
			getUserInfo:function(){
				let _this = this;
				if(uni.getStorageSync('userInfo') ==''){
					let userInfo = {}
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							userInfo.nickName = infoRes.userInfo.nickName; //昵称
							userInfo.avatarUrl = infoRes.userInfo.avatarUrl; //头像
							userInfo.gender = infoRes.userInfo.gender;
							userInfo.province = infoRes.userInfo.province;
							userInfo.city = infoRes.userInfo.city;
							userInfo.major = ''
							try {
								uni.setStorageSync('userInfo',userInfo)
								uni.setStorageSync('nickName',userInfo.nickName)
								_this.formSubmit()
							} catch (e) {}
						},
						fail(res) {}
					});
				} else {
					_this.formSubmit()
				}
				
			},
			// 验证手机号有没有注册过
			verifyPhone:function(e){
				 if(!(/^1[3456789]\d{9}$/.test(this.phoneNumber))){ 
				        uni.showToast({
				        	title: '请输入有效的11位电话号码！',
				        	icon: 'none'
				        })
				    } else {
						//先判断该手机号是否已经注册过,注册过给出提示
						console.log(this.phoneNumber)
						verifyPhone({phone: this.phoneNumber}).then(res => {
							if(res.data.code == 200) {
								// true时证明手机号已存在
								if(res.data.data == true) {
									uni.showToast({
										title: '该号码注册的用户已存在',
										icon: 'none',
										mask: true,
										duration: 1000
									})
								} else {
									this.getPhoneCode()
									// let getStep = {
									// 	phoneNumber :this.phoneNumber,
									// 	active: 1
									// }
									// this.$emit("getStep", getStep)
								}
							} else{
							uni.showToast({
								title: '网络出错',
								icon: 'none',
								mask: true,
								duration: 1000
							})
						}
						})
					}
			},
			// 点击是否同意协议
			onChange:function(){
				this.checked = !this.checked
			},
			// 获取验证码
			getPhoneCode:function(){
				// 2.若是第一次注册，开始发送倒计时和获取验证码；
				this.inMsgInterval = true;
				var that = this;
				var interval = setInterval(function() {
					if (that.msgInterval == 0) {
						clearInterval(interval);
						console.log('时间到了');
						that.inMsgInterval = false;
						that.msgInterval = that.fixedMsgInterval;
						that.countDown = '';
						return;
					}
					that.countDown = '(' + that.msgInterval + 's)';
					that.msgInterval--;
				}, 1000);
				getPhoneCode({phone: this.phoneNumber}).then(res => {
					if(res.data.code == 200) {
						console.log("getMemberCode res:" + res)
						let getStep = {
							phoneNumber :this.phoneNumber,
							active: 1
						}
						this.$emit("getStep", getStep)
					} else{
							uni.showToast({
								title: '网络出错',
								icon: 'none',
								mask: true,
								duration: 1000
							})
						}
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F2F2F2;
	}
	.protocol {
		height: 50upx;
		line-height: 50upx;
		border-bottom: 5upx solid #ebf1f0;
		text-align: center;
		margin-left: 5%;
	}
	.marginCheckbox {
		margin: 0 25upx;
	}
	.protocolText {
		color: #53A4FC; 
	}
</style>
